<!DOCTYPE html>
<html lang="en-US" itemscope="itemscope" itemtype="http://schema.org/WebPage">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Electro &#8211; Electronics Ecommerce Theme</title>

    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" media="all"/>
    <link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css" media="all"/>
    <link rel="stylesheet" type="text/css" href="assets/css/animate.min.css" media="all"/>
    <link rel="stylesheet" type="text/css" href="assets/css/font-electro.css" media="all"/>
    <link rel="stylesheet" type="text/css" href="assets/css/owl-carousel.css" media="all"/>
    <link rel="stylesheet" type="text/css" href="assets/css/style.css" media="all"/>
    <link rel="stylesheet" type="text/css" href="assets/css/colors/yellow.css" media="all"/>
    <link rel="stylesheet" type="text/css" href="css/xcConfirm.css"/>
    <link rel="stylesheet" type="text/css" href="css/order-info.css" media="all"/>
    <link rel="stylesheet" type="text/css" href="css/my-order.css">


    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,700italic,800,800italic,600italic,400italic,300italic'
          rel='stylesheet' type='text/css'>

    <link rel="shortcut icon" href="assets/images/fav-icon.png">
</head>


<body class="page home page-template-default">
<div id="page" class="hfeed site">
    <a class="skip-link screen-reader-text" href="#site-navigation">Skip to navigation</a>
    <a class="skip-link screen-reader-text" href="#content">Skip to content</a>

    <div class="top-bar">
        <div class="container">
            <nav>
                <ul id="menu-top-bar-left" class="nav nav-inline pull-left animate-dropdown flip">
                    <li class="menu-item animate-dropdown"><a title="欢迎来到 CSU Mall" href="#">欢迎来到CSU Mall</a></li>
                </ul>
            </nav>

            <nav id="logined-nav" style="display: none">
                <ul id="menu-top-bar-right" class="nav nav-inline pull-right animate-dropdown flip">
                    <li class="menu-item animate-dropdown"><a title="Store Locator" href="#"><i class="ec ec-map-pointer"></i>当地商店</a></li>
                    <li class="menu-item animate-dropdown"><a title="Track Your Order" href="track-your-order.html"><i class="ec ec-transport"></i>物流</a></li>
                    <li class="menu-item animate-dropdown"><a title="Shop" href="shop.html"><i class="ec ec-shopping-bag"></i>Shop</a></li>
                    <li class="menu-item animate-dropdown"><a title="My Account" href="./my-info.html"><i class="ec ec-user"></i>个人中心</a></li>
                </ul>
            </nav>
            <nav id="login-nav" style="display:none;">
                <ul class="nav nav-inline pull-right animate-dropdown flip">
                    <li class="menu-item animate-dropdown"><a title="My Account" href="./my-account.html"><i class="ec ec-user"></i>请登录</a></li>
                </ul>
            </nav>
        </div>
    </div><!-- /.top-bar -->


    <nav class="navbar navbar-primary navbar-full">
        <div class="container">
            <ul class="nav navbar-nav departments-menu animate-dropdown">
                <li class="nav-item dropdown ">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="./home.html"
                       id="departments-menu-toggle">Cherry Save Us malll</a>
                </li>
            </ul>
            <div class="navbar-search">
                <label class="sr-only screen-reader-text" for="input-search">Search for:</label>
                <div class="input-group">
                    <input type="text" id="input-search" class="form-control search-field" dir="ltr" value="" name="s"
                           placeholder="Search for products"/>
                    <div class="input-group-addon search-categories">
                        <select name='product_cat' id='product_cat' class='postform resizeselect'>
                            <option value='0' selected='selected'>All Categories</option>
                            <option class="level-0" value="laptops-laptops-computers">Laptops</option>

                        </select>
                    </div>
                    <div class="input-group-btn">
                        <input type="hidden" id="search-param" name="post_type" value="product"/>
                        <button class="btn btn-secondary" id="search-btn"><i class="ec ec-search"></i></button>
                    </div>
                </div>
            </div>

            <ul class="navbar-mini-cart navbar-nav animate-dropdown nav pull-right flip">
                <li class="nav-item dropdown">
                    <a href="cart.html" class="nav-link" data-toggle="dropdown">
                        <i class="ec ec-shopping-bag"></i>
                        <span class="cart-items-count count">4</span>
                        <span class="cart-items-total-price total-price"><span
                                class="amount">&#36;1,215.00</span></span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-mini-cart">
                        <li>
                            <div class="widget_shopping_cart_content">

                                <ul class="cart_list product_list_widget ">


                                    <li class="mini_cart_item">
                                        <a title="Remove this item" class="remove" href="#">×</a>
                                        <a href="single-product.html">
                                            <img class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image"
                                                 src="assets/images/products/mini-cart1.jpg" alt="">White lumia 9001&nbsp;
                                        </a>

                                        <span class="quantity">2 × <span class="amount">£150.00</span></span>
                                    </li>


                                    <li class="mini_cart_item">
                                        <a title="Remove this item" class="remove" href="#">×</a>
                                        <a href="single-product.html">
                                            <img class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image"
                                                 src="assets/images/products/mini-cart2.jpg" alt="">PlayStation 4&nbsp;
                                        </a>

                                        <span class="quantity">1 × <span class="amount">£399.99</span></span>
                                    </li>

                                    <li class="mini_cart_item">
                                        <a data-product_sku="" data-product_id="34" title="Remove this item"
                                           class="remove" href="#">×</a>
                                        <a href="single-product.html">
                                            <img class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image"
                                                 src="assets/images/products/mini-cart3.jpg" alt="">POV Action Cam
                                            HDR-AS100V&nbsp;

                                        </a>

                                        <span class="quantity">1 × <span class="amount">£269.99</span></span>
                                    </li>


                                </ul><!-- end product list -->


                                <p class="total"><strong>Subtotal:</strong> <span class="amount">£969.98</span></p>


                                <p class="buttons">
                                    <a class="button wc-forward" href="cart.html">View Cart</a>
                                    <a class="button checkout wc-forward" href="checkout.html">Checkout</a>
                                </p>


                            </div>
                        </li>
                    </ul>
                </li>
            </ul>

            <ul class="navbar-wishlist nav navbar-nav pull-right flip">
                <li class="nav-item">
                    <a href="wishlist.html" class="nav-link"><i class="ec ec-favorites"></i></a>
                </li>
            </ul>
            <ul class="navbar-compare nav navbar-nav pull-right flip">
                <li class="nav-item">
                    <a href="compare.html" class="nav-link"><i class="ec ec-compare"></i></a>
                </li>
            </ul>
        </div>
    </nav>

    <div id="content" class="site-content" tabindex="-1">
        <div class="container">

            <nav class="woocommerce-breadcrumb"><a href="home.html">首页</a><span class="delimiter"><i
                    class="fa fa-angle-right"></i></span><a href="my-order.html">我的订单</a>
            </nav>

            <div id="primary" class="content-area">
                <main id="main" class="site-main">


                    <ul class="nav nav-tabs">
                        <li role="presentation" class="active"><a href="#">订单信息</a></li>
                    </ul>

                    <div class="order-detail">

                        <div class="receive">
                            收货地址： <span class="receive-info" id="receive-info" style="margin-left: 18px">姚相帛，86-18835130952，湖南省 长沙市 天心区 文源街道 韶山南路68号中南大学铁道学院 </span>
                        </div>
                        <div>卖家信息:</div>
                        <table class="table" style=" width: 80% ; margin-left:8%;border-bottom: 1px solid #f0ad4e">
                            <tbody>
                            <tr>
                                <td>昵称: <span id="seller-nickname">yaoyaoyao</span></td>
                                <td>真实姓名： <span id="seller-realname">韩**</span></td>
                                <td>城市：<span id="seller-address">浙江杭州</span></td>
                            </tr>

                            <tr>
                                <td>联系电话:<span id=" seller-phone">19836281829</span></td>
                                <td>邮件:<span id=" seller-email">1983628189@qq.com</span></td>
                                <td></td>
                            </tr>
                            </tbody>
                        </table>
                        <div>订单信息:</div>
                        <div style="width: 80%;margin-left: 8%;padding: 5px">
                            <span>订单编号:</span><span id="order-id-top">1091771554941962506</span>
                            <span style="margin-left: 44px">创建时间:</span><span
                                id="order-date-top">2020-06-29 10:27:09</span>
                        </div>


                        <table class="table" style="display: inline-block">
                            <tbody>
                            <tr style="background-color: #fed700">
                                <td style="width: 450px"><span id="order-date">2020-11-28</span> id: <a href="#"
                                                                                                        class="order-id"
                                                                                                        id="order-id">ERDSADWQSA1023</a>
                                </td>
                                <td>单价</td>
                                <td>数量</td>
                                <td>总价</td>
                                <td>状态</td>
                                <td></td>
                            </tr>
                            </tbody>
                            <tbody style="border:1px solid #f0ad4e">
                            <tr class="active">
                                <td class="row">
                                             <span style="float: left">
                                                 <img id="product-img" src="" width="100px" height="100px">
                                             </span>
                                    <div class="col-lg-6">
                                        <div><a href="#" id="product-name">这里会有很长的名字！！！！</a></div>
                                        <div id="product-description"></div>

                                    </div>
                                </td>

                                <td style="vertical-align: middle"><span id="product-price">12999</span>¥</td>
                                <td style="vertical-align: middle"><span id="product-count">5</span></td>
                                <td style="vertical-align: middle"><span id="order-price">555555</span>¥</td>
                                <td style="vertical-align: middle" id="order-state">
                                    <a href="#" style="margin-top: 10px">已支付</a>

                                    <a href="#" style="margin-top: 10px" class="btn-info">追加评论</a>
                                </td>
                                <td></td>
                            </tr>
                            </tbody>

                        </table>
                        <div id="comment-field">
                            <div class="order" style="margin-bottom: 10px">订单评价</div>
                            <div style="width: 80%;margin-left: 8%;padding: 5px">
                            <div style="margin-bottom: 10px">
                                <span style="font-weight: bolder;line-height: 22px;font-size: 18px">评价星级:</span>
                                <p class="stars" style="margin-left: 10px">
                                    <div id="star" style="display: flex"></div>
                                </p>


                            </div>
                            <textarea id="comment-textarea"  scols="30" rows="5" style="resize: none"></textarea>
                            <button class="btn-info"  onclick="submitComment()"
                                    style="height: 36px; padding: 10px;margin-top: 18px;margin-right:10px;float: right">
                                提交评论
                            </button>
                            </div>
                        </div>
                    </div>


                </main><!-- #main -->
            </div><!-- #primary -->
        </div><!-- .container -->
    </div><!-- #content -->

    <section class="brands-carousel">
        <h2 class="sr-only">Brands Carousel</h2>
        <div class="container">
            <div id="owl-brands" class="owl-brands owl-carousel unicase-owl-carousel owl-outer-nav">

                <div class="item">

                    <a href="#">

                        <figure>
                            <figcaption class="text-overlay">
                                <div class="info">
                                    <h4>Acer</h4>
                                </div><!-- /.info -->
                            </figcaption>

                            <img src="assets/images/blank.gif" data-echo="assets/images/brands/1.png"
                                 class="img-responsive" alt="">

                        </figure>
                    </a>
                </div><!-- /.item -->


                <div class="item">

                    <a href="#">

                        <figure>
                            <figcaption class="text-overlay">
                                <div class="info">
                                    <h4>Apple</h4>
                                </div><!-- /.info -->
                            </figcaption>

                            <img src="assets/images/blank.gif" data-echo="assets/images/brands/2.png"
                                 class="img-responsive" alt="">

                        </figure>
                    </a>
                </div><!-- /.item -->


                <div class="item">

                    <a href="#">

                        <figure>
                            <figcaption class="text-overlay">
                                <div class="info">
                                    <h4>Asus</h4>
                                </div><!-- /.info -->
                            </figcaption>

                            <img src="assets/images/blank.gif" data-echo="assets/images/brands/3.png"
                                 class="img-responsive" alt="">

                        </figure>
                    </a>
                </div><!-- /.item -->


                <div class="item">

                    <a href="#">

                        <figure>
                            <figcaption class="text-overlay">
                                <div class="info">
                                    <h4>Dell</h4>
                                </div><!-- /.info -->
                            </figcaption>

                            <img src="assets/images/blank.gif" data-echo="assets/images/brands/4.png"
                                 class="img-responsive" alt="">

                        </figure>
                    </a>
                </div><!-- /.item -->


                <div class="item">

                    <a href="#">

                        <figure>
                            <figcaption class="text-overlay">
                                <div class="info">
                                    <h4>Gionee</h4>
                                </div><!-- /.info -->
                            </figcaption>

                            <img src="assets/images/blank.gif" data-echo="assets/images/brands/5.png"
                                 class="img-responsive" alt="">

                        </figure>
                    </a>
                </div><!-- /.item -->


                <div class="item">

                    <a href="#">

                        <figure>
                            <figcaption class="text-overlay">
                                <div class="info">
                                    <h4>HP</h4>
                                </div><!-- /.info -->
                            </figcaption>

                            <img src="assets/images/blank.gif" data-echo="assets/images/brands/6.png"
                                 class="img-responsive" alt="">

                        </figure>
                    </a>
                </div><!-- /.item -->


                <div class="item">

                    <a href="#">

                        <figure>
                            <figcaption class="text-overlay">
                                <div class="info">
                                    <h4>HTC</h4>
                                </div><!-- /.info -->
                            </figcaption>

                            <img src="assets/images/blank.gif" data-echo="assets/images/brands/3.png"
                                 class="img-responsive" alt="">

                        </figure>
                    </a>
                </div><!-- /.item -->


                <div class="item">

                    <a href="#">

                        <figure>
                            <figcaption class="text-overlay">
                                <div class="info">
                                    <h4>IBM</h4>
                                </div><!-- /.info -->
                            </figcaption>

                            <img src="assets/images/blank.gif" data-echo="assets/images/brands/5.png"
                                 class="img-responsive" alt="">

                        </figure>
                    </a>
                </div><!-- /.item -->


                <div class="item">

                    <a href="#">

                        <figure>
                            <figcaption class="text-overlay">
                                <div class="info">
                                    <h4>Lenova</h4>
                                </div><!-- /.info -->
                            </figcaption>

                            <img src="assets/images/blank.gif" data-echo="assets/images/brands/2.png"
                                 class="img-responsive" alt="">

                        </figure>
                    </a>
                </div><!-- /.item -->


                <div class="item">

                    <a href="#">

                        <figure>
                            <figcaption class="text-overlay">
                                <div class="info">
                                    <h4>LG</h4>
                                </div><!-- /.info -->
                            </figcaption>

                            <img src="assets/images/blank.gif" data-echo="assets/images/brands/1.png"
                                 class="img-responsive" alt="">

                        </figure>
                    </a>
                </div><!-- /.item -->


                <div class="item">

                    <a href="#">

                        <figure>
                            <figcaption class="text-overlay">
                                <div class="info">
                                    <h4>Micromax</h4>
                                </div><!-- /.info -->
                            </figcaption>

                            <img src="assets/images/blank.gif" data-echo="assets/images/brands/6.png"
                                 class="img-responsive" alt="">

                        </figure>
                    </a>
                </div><!-- /.item -->


                <div class="item">

                    <a href="#">

                        <figure>
                            <figcaption class="text-overlay">
                                <div class="info">
                                    <h4>Microsoft</h4>
                                </div><!-- /.info -->
                            </figcaption>

                            <img src="assets/images/blank.gif" data-echo="assets/images/brands/4.png"
                                 class="img-responsive" alt="">

                        </figure>
                    </a>
                </div><!-- /.item -->


            </div><!-- /.owl-carousel -->

        </div>
    </section>


</div><!-- #page -->

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/tether.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap-hover-dropdown.min.js"></script>
<script type="text/javascript" src="assets/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="assets/js/echo.min.js"></script>
<script type="text/javascript" src="assets/js/wow.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.waypoints.min.js"></script>
<script type="text/javascript" src="assets/js/electro.js"></script>


<script type="text/javascript" src="./js/common.js"></script>
<script type="text/javascript" src="./js/xcConfirm.js"></script>
<script type="text/javascript" src="./js/jquery.raty.min.js"></script>

<script type="text/javascript" src="js/user.js"></script>
<script type="text/javascript" src="js/top-bar.js"></script>
<script type="text/javascript" src="js/common-nav.js"></script>
<script type="text/javascript" src="js/order-info.js"></script>

<script>
    $('#star').raty();

</script>
</body>
</html>
